<template>
	<view class="addAddress">
		<view class="tip">地址信息仅用于上门服务，隐私信息将完全保密</view>
		<view class="infos">
			<u-form :model="adresForm" ref="adresRef" label-width="180rpx">
				<u-form-item label="联系人" prop="name">
					<u-input v-model="adresForm.name" placeholder="请填写联系人姓名" maxlength="11" />
				</u-form-item>
				<u-form-item label="手机号码" prop="mobile">
					<u-input v-model="adresForm.mobile" placeholder="请填写联系人手机号码" maxlength="11" />
				</u-form-item>
				<u-form-item label="所在城市" prop="city">
					<view class="city-box" @click="doAddShow">
						<view class="citys">{{adresForm.city || '请选择'}} </view>
						<u-icon name="arrow-right" size="30rpx" color="#A6A6A6"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="具体地址" prop="remark">
					<u-input v-model="adresForm.remark" placeholder="请填写街道/小区/办公楼" maxlength="15" />
				</u-form-item>
				<u-form-item label="楼号/门牌号" prop="house_number">
					<u-input v-model="adresForm.house_number" placeholder="例: 6号楼203室" maxlength="15" />
				</u-form-item>
			</u-form>
		</view>

		<view class="switch">
			<view class="tips">提示：同城服务默认推荐使用该地址</view>
			<u-switch class="switchObj" v-model="adresForm.isDefault" @change="onChange" active-color="#01C3A8"
				inactive-color="#E2E2E2" size="24px" />
		</view>

		<button class="fixed-btn" @click="dosave">保存</button>

		<!-- 地区选择 -->
		<u-picker mode="region" v-model="addShow" @confirm="doconfirm"></u-picker>
	</view>
</template>

<script>
	import { ResAddress, ResChangeAddress } from '@/untils/api.js'
	export default {
		data() {
			return {
				adresForm: {
					name: '',
					mobile: '',
					city: '',
					remark: '',
					house_number: '',
					isDefault: 0,
				},
				rules: {
					name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
					mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' },
						{
							pattern: /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/,
							message: '请输入正确的11位手机号',
							trigger: 'blur'
						},
					],
					city: [{ required: true, message: '请选择城市', trigger: 'blur' }],
					remark: [{ required: true, message: '请输入具体地址', trigger: 'blur' }],
					house_number: [{ required: true, message: '请输入楼号/门牌号', trigger: 'blur' }],
				},
				addShow: false,
				iessue: true,
			}
		},
		onLoad(option) {
			let data = JSON.parse(option.data ? option.data : null)
			if (data) {
				this.adresForm.name = data.title
				this.adresForm.mobile = data.mobile
				this.adresForm.city = data.city
				this.adresForm.remark = data.remark
				this.adresForm.house_number = data.house_number
				this.adresForm.isDefault = data.isDefault
				this.adresForm.address_id = data.id
			}
			this.iessue = JSON.parse(option.iessue)
		},
		onReady() {
			this.$refs.adresRef.setRules(this.rules);
		},
		methods: {
			Toaddress() {
				uni.navigateBack()
			},
			dosave() {
				this.$refs.adresRef.validate(async (valid) => {
					if (!valid) return
					// 为true是添加,false是修改
					if (this.iessue) {
						const { data: res } = await ResAddress(this.adresForm)
						if (res.code != 1) return uni.$showMsg(res.msg)
						this.$refs.adresRef.resetFields() // 清空
						uni.navigateBack()
					} else {
						const { data: res } = await ResChangeAddress(this.adresForm)
						if (res.code != 1) return uni.$showMsg(res.msg)
						uni.navigateBack()
					}
				})
			},
			doconfirm(e) {
				let province = e.province.label
				let citys = e.city.label
				if (citys == '市辖区') {
					citys = ''
				}
				let area = e.area.label

				this.adresForm.city = province + citys + area
			},
			doAddShow() {
				this.addShow = true
			},
			onChange(status) {
				if (status) {
					this.adresForm.isDefault = 1
				} else {
					this.adresForm.isDefault = 0
				}
			},
		}

	}
</script>

<style lang="scss" scoped>
	.addAddress {
		font-family: PingFangSC-Regular, PingFang SC;
	}



	.addAddress .tip {
		width: 100%;
		height: 81rpx;
		line-height: 81rpx;
		background: #FCF0E2;
		padding-left: 22rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #A47A47;
	}

	.infos {
		padding: 0 33rpx 0 27rpx;

		.city-box {
			display: flex;
			justify-content: space-between;
		}
	}

	.switch {
		position: relative;
		padding: 70rpx 30rpx;
	}

	.switch .tips {
		font-size: 26rpx;
		font-weight: 400;
		color: #9A9A9A;
	}

	.switch .switchObj {
		position: absolute;
		top: 52rpx;
		right: 33rpx;
	}

	.addAddress .fixed-btn {
		position: fixed;
		bottom: 36rpx;
		left: 23rpx;
		width: 704rpx;
		text-align: center;
		height: 89rpx;
		line-height: 89rpx;
		background: #01C3A8;
		border-radius: 45rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #F1FFFE;
	}
</style>
